<template>
  <view class="page">
    <view class="baseInfo row">
      <view class="functionItem">
        <view class="label">头像</view>
        <view class="value">
          <view class="img">
            <u-avatar :src="userInfo.headimgurl" size="80" mode="circle" class="userAvatarUrl"></u-avatar>
          </view>
        </view>
      </view>

      <view class="functionItem">
        <view class="label">用户名</view>
        <view class="value">
          <text>{{ userInfo.wx_nickname || userInfo.username || '微信用户' }}</text>
        </view>
      </view>
    </view>

    <view class="row">
      <view class="functionItem" @click="toDEv">
        <view class="label">策略设置</view>
        <view class="value">
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
    </view>

    <view class="row about">
      <view class="functionItem" @click="navigateTo('/pages/explain/index')">
        <view class="label">使用说明</view>
        <view class="value">
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="functionItem" @click="toDEv">
        <view class="label">关于我们</view>
        <view class="value">
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    toDEv() {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      });
    },
    navigateTo(url) {
      uni.navigateTo({
        url
      });
    }
  },
  computed: {
    userInfo() {
      return uni.getStorageSync('userInfo') || {};
    }
  }
};
</script>

<style lang="scss" scoped>
// 每个功能模块之间的间距
$mt: 20rpx;
.page {
  height: 100vh;
  background: #f5f8fb;
  &:first-child {
    margin-top: 0;
  }
}

.label {
  font-size: 28rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
}

.value {
  font-size: 28rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #b1b4bd;
}

.functionItem {
  padding: 0 32rpx;
  width: 750rpx;
  height: 110rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-bottom: 2rpx solid rgba(197, 201, 212, 0.2);
  .img {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: inline-block;
    color: #c4d9e8;
    background-color: #ffffff;
    overflow: hidden;
    border: 4rpx solid #fff;
    box-sizing: content-box;
    box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.15);
  }
  .userAvatarUrl {
    float: left;
    width: 80rpx;
    height: 80rpx;
  }
}

.row {
  margin-top: $mt;
}
</style>